<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>

    <!-- 
        Vue中使用组件的三大步骤
            1.定义组件(创建组件)
            2.注册组件
            3.使用组件(写组件标签)

        1.如何定义一个组件？
            使用Vue.extend(options)创建,其中Options和new Vue(options)时传入的那个options几乎一样,但区别如下
                1.el不要写,为什么？———— 最终所有的组件都要经过一个vm管理,由vm中的el决定服务哪个容器
                2.data必须写成函数,为什么?————避免组件被复用时,数据存在引用关系
            备注: 使用template可以配置组件结构
        2.如何注册组件?
            1.局部注册: 靠new Vue的时候传入components选项
            2.全局注册: 靠Vue.component('组件名',组件)
        3.编写组件标签
            <school></school>

     -->

    <div id="root">
        <school></school>
        <hr>
        <student></student>
        <hr>
        <hello></hello>
    </div>
    <div id="root2"></div>

    <script>

        // 创建school组件
            const school = Vue.extend({
                template:`
                    <div>
                        <h2>学校名称: {{schoolName}}</h2>
                        <h2>学校地址: {{address}}</h2>
                        <button @click.stop="showName">点我提学校名</button>
                    </div>
                `,
                //     el:'#root', 组件定义时,一定不要写配置项，因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器
                data () {
                    return {
                        schoolName: 'aa',
                        address: 'bb',
                    }
                },
                methods: {
                    showName () {
                        alert(this.schoolName)
                    }
                }
            
            })

        // 创建school组件
        const student = Vue.extend({
            template:`
                    <div>
                        <h2>学生姓名: {{studentName}}</h2>
                        <h2>学生年龄: {{age}}</h2>
                    </div>
                `,
            //     el:'#root', 组件定义时,一定不要写配置项，因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器
            data () {
                return {
                    studentName: 'cc',
                    age: 18
                }
            }
        
        })

        // 创建hello组件，全局
        const hello = Vue.extend({
            template:`
                <div>
                    <h2>你好啊!{{name}}</h2>
                </div>
            `,
            data () {
                return {
                    name: 'mmm'
                }
            }
        })

        //全局注册组件
        Vue.component('hello', hello)
        new Vue({
            el:'#root',
            //注册组件(局部注册)
            components: {
                school,
                student
            }
        })

        
        new Vue({
            el:'#root2'
        })



        // let data = {
        //     a:1,
        //     b:2
        // }
        // const x1 = data
        // const x2 = data
        // x2.a = 99,x1.a也会变

        function data () {
            return {
                a:1,
                b:2
            }
        }
        const x1 = data()
        const x2 = data()
        // x2.a = 99,x1.a不会变

    

    </script>

</body>
</html>